<comment th:remove="all" xmlns:th="http://www.w3.org/1999/html">
    <!-- Selectize Collection is used in place of a ListGrid if
        the collection's @AdminPresentation AddType is AddMethodType.SELECTIZE_LOOKUP -->
</comment>

<th:block th:if="${!#strings.isEmpty(listGrid.templateOverride)}">
    <th:block th:include="${listGrid.templateOverride}" th:with="listGrid=${listGrid}"></th:block>
</th:block>

<th:block th:unless="${!#strings.isEmpty(listGrid.templateOverride)}">
    <div class="selectize-wrapper" blc_admin:component_id="${listGrid}">
        <select th:id="'selectize-' + ${listGrid.friendlyName}"
                class="selectize-adder"
                multiple="multiple"
                th:name="${listGrid.friendlyName} + '[]'"
                th:disabled="${listGrid.isReadOnly}"
                th:classappend="${listGrid.isReadOnly} ? 'hidden' : ''"
                th:attr="data-selectizeurl=${listGrid.selectizeUrl},
                        data-selectizesearch=${listGrid.headerFields[0].name},
                        data-selectizeplaceholder=#{${listGrid.friendlyName}}"
                th:placeholder="'Select ' + #{${listGrid.friendlyName}} + '...'"
                tabindex="-1">
            <th:block th:each="record : ${listGrid.records}"
                 th:unless="${#lists.isEmpty(listGrid.records)}">

                <th:block th:each="headerField : ${record.listGrid.headerFields}"
                     th:if="${headerField.isVisible}"
                     th:with="field=${record.getField(headerField.name)}">

                    <option th:if="${record.altId}" th:value="${record.id}" th:attr="data-alternate_id=${record.altId}" selected="selected" th:text="${field.displayValue}"></option>
                    <option th:unless="${record.altId}" th:value="${record.id}" selected="selected" th:text="${field.displayValue}"></option>

                </th:block>
            </th:block>
        </select>

        <select th:id="'selectize-' + ${listGrid.friendlyName}"
                class="selectize-collection read-only"
                multiple="multiple"
                th:name="${listGrid.friendlyName} + '[]'"
                th:disabled="${listGrid.isReadOnly}"
                th:classappend="${listGrid.isReadOnly} ? 'disabled' : ''"
                tabindex="-1" readonly="readonly">
            <th:block th:each="record : ${listGrid.records}"
                th:unless="${#lists.isEmpty(listGrid.records)}">

                <th:block th:each="headerField : ${record.listGrid.headerFields}"
                    th:if="${headerField.isVisible}"
                    th:with="field=${record.getField(headerField.name)}">

                    <option th:if="${record.altId}" th:value="${record.id}" th:attr="data-alternate_id=${record.altId}" selected="selected" th:text="${field.displayValue}"></option>
                    <option th:unless="${record.altId}" th:value="${record.id}" selected="selected" th:text="${field.displayValue}"></option>

                </th:block>
            </th:block>
        </select>
    </div>
</th:block>